<template>
  <div id="myChart3">
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart3'))
      var option = {
        tooltip : {
          formatter: '{a} <br/>{c} {b}'
        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        series : [
          {
            name:'速度',
            type:'gauge',
            z: 3,
            min:0,
            max:220,
            splitNumber:11,
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                width: 10
              }
            },
            axisTick: {            // 坐标轴小标记
              length :15,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: {           // 分隔线
              length :20,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            title : {
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 20,
                fontStyle: 'italic'
              }
            },
            detail : {
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder'
              }
            },
            data:[{value: 40, name: 'km/h'}]
          },
          {
            name:'转速',
            type:'gauge',
            center : ['25%', '55%'],    // 默认全局居中
            radius : '50%',
            min:0,
            max:7,
            endAngle:45,
            splitNumber:7,
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                width: 8
              }
            },
            axisTick: {            // 坐标轴小标记
              length :12,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: {           // 分隔线
              length :20,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            pointer: {
              width:5
            },
            title : {
              offsetCenter: [0, '-30%'],       // x, y，单位px
            },
            detail : {
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder'
              }
            },
            data:[{value: 1.5, name: 'x1000 r/min'}]
          },
          {
            name:'油表',
            type:'gauge',
            center : ['75%', '50%'],    // 默认全局居中
            radius : '50%',
            min:0,
            max:2,
            startAngle:135,
            endAngle:45,
            splitNumber:2,
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                color: [[0.2, '#ff4500'], [0.8, '#48b'], [1, '#228b22']],
                width: 8
              }
            },
            axisTick: {            // 坐标轴小标记
              splitNumber:5,
              length :10,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            axisLabel: {
              formatter:function (v) {
                switch (v + '') {
                  case '0' : return 'E'
                  case '1' : return 'Gas'
                  case '2' : return 'F'
                }
              }
            },
            splitLine: {           // 分隔线
              length :15,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            pointer: {
              width:2
            },
            title : {
              show: false
            },
            detail : {
              show: false
            },
            data:[{value: 0.5, name: 'gas'}]
          },
          {
            name:'水表',
            type:'gauge',
            center : ['75%', '50%'],    // 默认全局居中
            radius : '50%',
            min:0,
            max:2,
            startAngle:315,
            endAngle:225,
            splitNumber:2,
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                color: [[0.2, '#ff4500'], [0.8, '#48b'], [1, '#228b22']],
                width: 8
              }
            },
            axisTick: {            // 坐标轴小标记
              show: false
            },
            axisLabel: {
              'formatter' : function (v) {
                switch (v + '') {
                  case '0' : return 'H'
                  case '1' : return 'Water'
                  case '2' : return 'C'
                }
              }()
            },
            splitLine: {           // 分隔线
              length :15,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            pointer: {
              width:2
            },
            title : {
              show: false
            },
            detail : {
              show: false
            },
            data:[{value: 0.5, name: 'gas'}]
          }
        ]
      }
      clearInterval(timeTicket)
      var timeTicket = setInterval(function () {
        option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0
        option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0
        option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0
        option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0
        myChart.setOption(option, true)
      }, 2000)

      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>

<style type="styleesheet/scss" lang="scss" scoped>
#myChart3{
  width: 100%;
  height: 100%;
}
</style>
